<!DOCTYPE HTML>
<html>
<head>

    <meta charset="UTF-8">
    <meta name="robots" content="index,follow"> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>debugout.js</title>

   <!-- <link rel="stylesheet" type="text/css" href="../inorganik.github.io/assets/css/style.css?v=20140820">
-->
    <script src="../static/js/debugout.js?v=1.0.0" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    </script>
</head>

<body>
    <div id="wrap">
        <header>
            日志查询
        </header>
        <section>
            <div class="col full marginTop">
                <div class="code-contain marginBottom indigo">
                    <code>
                    </code>
                </div>
            </div>
        </section>
        <section>
            <form>
                <h4 class="inlineLeft noMargin marginRight weight300">Get the log at run-time or any time with these methods:</h4>
                <input type="button" class="inlineLeft marginRight" value="download log" onClick="demoDownloadLog()">
                <input type="button" class="inlineLeft marginRight" value="get log" onClick="demoGetLog()" style="width:100px;">
                <input type="button" class="inlineLeft marginRight" value="tail" onClick="demoTail()" style="width:100px;">
            </form>
        </section>
        <section>
            <form>
                <h4 class="inlineLeft noMargin marginRight weight300">Also, search:</h4>
                <input type="text" class="inlineLeft" value="" id="search" style="width:140px; margin-right:5px" placeholder="ex: subgenre">
                <input type="button" class="inlineLeft marginRight" value="search" onClick="demoSearch()" style="width:100px;">

                <h4 class="inlineLeft noMargin marginRight weight300">And slice:</h4>
                <input type="number" class="inlineLeft" value="" step="1" id="sliceStart" style="width:80px; margin-right:5px" placeholder="line">
                <input type="number" class="inlineLeft marginRight" value="" step="1" id="sliceNumLines" style="width:80px" placeholder="# of lines">
                <input type="button" class="inlineLeft" value="get slice" onClick="demoGetSlice()" style="width:100px;">
            </form>
        </section>
        <section class="marginBottom">
            <div class="col full marginBottom marginTop">
                <h4 class="weight300">Console window:</h4>
                <div class="code-contain marginBottom lime" style="min-height:500px">
                    <code id="codeVisualizer">// Use a method above and output will be displayed here</code>
                </div>
            </div>
        </section>
    </div>

</body>
<script type="text/javascript">

    // declare a debugout instance in the global namespace
    // that means: not inside any functions
    //var debugout = new debugout;

    // a test object
    var obj = {
        name: 'Jamie',
        age: 34,
        arr: ['another', 'test', 'array', 4, true, false],
        emptyString: '',
        nestedObj: {
            apple: 'red',
            orange: 'orange',
            pear: 'green',
            nestedNestedObj: {
                red: 0,
                yellow: 6,
                green: 4
            }
        },
        date: new Date(),
        flag: true,
        anotherFlag: false,
    }
    // a date
    var d = new Date();
    // an array
    var arr = ['some', 'test', 'array'];
    // a function
    var testFunc = function() {
        return 'oh heck ya debugout';
    }
    // a regex
    var rgx = new RegExp(/debugout/);
    // array with objects
    var songOne = { genre: 'Drum \'n Bass', subgenre: 'liquid' }
    var songTwo = { genre: 'Dubstep', subgenre: 'brostep', someArray: arr }
    var songThree = { genre: 'R&B', subgenre: 'soul revival' }
    var arrayWithObjects = [songOne, songTwo, songThree];
    
   /* window.onload = function() {
        //document.getElementById('version').innerHTML = 'v'+debugout.version();
        // use debugout.log() instead of console.log()
        debugout.log('A date:');
        debugout.log(d);
        debugout.log('An array:');
        debugout.log(arr);
        debugout.log('A function:');
        debugout.log(debugout.objectSize);
        debugout.log('A regex:');
        debugout.log(rgx);
        debugout.log('an object with nested objects and arrays...');
        debugout.log(obj);
        debugout.log('an array of objects...');
        debugout.log(arrayWithObjects);
    }*/

    function demoDownloadLog() {
        var output = "debugout.downloadLog();";
        debugout.downloadLog();
        displayOutput(output);
    }
    function demoGetLog() {
        var output = "debugout.getLog();\n";
        output += debugout.getLog();
        displayOutput(output);
    }
    function demoTail() {
        var output = "debugout.tail(20);\n";
        output += debugout.tail(20);
        displayOutput(output);
    }
    function demoSearch() {
        var term = document.getElementById('search').value;
        var output = "debugout.search('"+term+"'');\n";
        output += debugout.search(term);
        displayOutput(output);
    }
    function demoGetSlice() {
        var startLine = Number(document.getElementById('sliceStart').value);
        var numLines = Number(document.getElementById('sliceNumLines').value);
        var output = "debugout.getSlice("+startLine+", "+numLines+");\n\n";
        output += debugout.getSlice(startLine, numLines);
        displayOutput(output);
    }
    function displayOutput(output) {
        // simulate console
        console.log(output);
        // format for html
        output = output.replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
        document.getElementById('codeVisualizer').innerHTML = output;
    }

    </script>
</html>
